<template>
	<view class="page">
		<view class="header">
			<image :src="IP + lostInfo.url" mode="widthFix"></image>
		</view>
		<view class="btn_group">
			<view class="btn" @click="match">
				智能识别
			</view>
			<view v-if="isShow" class="btn" @click="search">
				请求查找
			</view>
			<view class="btn" @click="send">
				提供线索
			</view>
			<view class="btn" @click="toClue">
				查看线索
			</view>
		</view>
		<view class="title">
			遗失人员详细信息
		</view>
		<TInput label="姓名" :disabled="true" type="text" v-model="lostInfo.name" />
		<TInput label="性别" :disabled="true" type="text" v-model="lostInfo.sex" />
		<TInput label="年龄" :disabled="true" type="text" v-model="lostInfo.age" />
		<TInput label="身高" :disabled="true" type="text" v-model="lostInfo.tall" />
		<TInput label="体重" :disabled="true" type="text" v-model="lostInfo.height" />
		<TInput label="发型" :disabled="true" type="text" v-model="lostInfo.hair_style" />
		<TInput label="走失时间" :disabled="true" type="text" v-model="lostInfo.lost_time" />		
		<TInput label="走失地点" :disabled="true" type="text" v-model="lostInfo.lost_place" />
		<TInput label="体型特征" :disabled="true" type="text" v-model="lostInfo.bodydis_features" />
		<TInput label="衣服特征" :disabled="true" type="text" v-model="lostInfo.dress_features" />
		<TInput label="携带物品" :disabled="true" type="text" v-model="lostInfo.personal_effects" />
		<view class="empty"></view>
	</view>
</template>

<script>
	import TInput from '../../../components/inputItem/input.vue'
	import {
		getLostInfo
	} from '../../../network/home.js'
	import {
		IP
	} from '../../../network/requestUrl.js'
	export default {
		components: {
			TInput
		},
		data() {
			return {
				IP,
				lostInfo: {},
				isShow: false
			};
		},
		onLoad(options) {
			this.init(options.id)
			this.isShow = this.$store.state.userInfo.role != "家属" && this.$store.state.userInfo.location_status != 1
		},
		methods: {
			async init(id) {
				const result = await getLostInfo(id)
				if (!result.flag) return 
				this.lostInfo = result.data
				console.log(result)
			},
			
			async send() {
				uni.navigateTo({
					url: '../clue/clue?lost_name=' + this.lostInfo.name
				})
			},
			match() {
				uni.navigateTo({
					url: '../../me/match/match?lost_id=' + this.lostInfo.id
				})
			},
			search() {
				uni.navigateTo({
					url: `../../me/location/location?lost_id=${this.lostInfo.id}&station_id=${this.lostInfo.station_id}`
				})
			},
			toClue() {
				uni.navigateTo({
					url: `../getClue/getClue?lost_id=${this.lostInfo.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #FFFFFF;
		font-size: 14px;
		.header {
			image {
				width: 100%;
			}
		}
		.btn_group {
			display: flex;
			justify-content: space-around;
			margin-top: 10px;
			font-size: 14px;
			.btn {
				// flex: 1;
				margin: 5px;
				padding: 5px;
				text-align: center;
				background-color: #1CBAB6;
				color: white;
				border-radius: 3px;
				&:active {
					background-color: #999999;
				}
			}
		}
		.title {
			text-align: center;
			margin: 10px 0 10px;
			color: #999;
		}
		.empty {
			height: 40px;
		}
	}
</style>
